<script setup>
import {inject, reactive} from "vue";
import RegisterDialog from "@/components/dialog/RegisterDialog.vue";
import router from "@/router/index.js";
import PersonalDialog from "@/components/dialog/PersonalDialog.vue";
import MessageDialog from "@/components/dialog/MessageDialog.vue";
import {getCookie, setCookie} from "@/util/CookieUtil.js";
import { language_ch, language_eg } from "@/language";

const DEFAULT_WORD = inject("DEFAULT_WORD");
const isLogin = inject("isLogin");
const myUser = inject("myUser");
// 是否显示
const isShow = inject("isShow");

function isHomePage() {
  return window.location.href.indexOf("home")!==-1;
}
// 设置语言
function setLanguage(language) {
  if(language==='') {
  } else if(language==='ch') {
    DEFAULT_WORD.value = language_ch;
  } else if(language==='eg') {
    DEFAULT_WORD.value = language_eg;
  }
  setCookie('language', language, 200000000);
}


</script>
<template>
  <!--标头背景板-->
  <div class="title-back"></div>
  <!--标头-->
  <div class="title">
<!--    <div v-if="!isHomePage()" class="tag-h" style="font-size: 40px; background: var(&#45;&#45;brand-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">VC</div>-->
<!--    <div v-else class="tag-h" style="font-size: 40px; overflow: hidden; width: 100px; padding: 0;"><div class="vcIcon">&emsp13;你好&ensp;&emsp13;VC</div></div>-->
    <div class="tag-h" style="font-size: 40px; overflow: hidden; width: 100px; padding: 0;"><div class="vcIcon">&emsp13;你好&ensp;&emsp13;VC</div></div>
    <div class="tag" @click="router.push('/home')">{{DEFAULT_WORD.homePage}}</div>
<!--    <div class="tag" @click="router.push('/mall')">{{DEFAULT_WORD.mall}}</div>-->
    <div class="tag-h"><input class="searchBox" type="text" :placeholder="DEFAULT_WORD.search"></div>
    <div class="tag">
      <el-dropdown style="height: 50px; line-height: 50px; color: black; font-size: 16px">
        <span class="el-dropdown-link" style="min-width: 60px; outline: none; color: #606266;">{{DEFAULT_WORD.language}}</span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="setLanguage('ch')">&ensp;简体中文&ensp;</el-dropdown-item>
          </el-dropdown-menu>
          <el-dropdown-menu>
            <el-dropdown-item @click="setLanguage('eg')">&ensp;English&ensp;</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <!-- 登录 -->
    <div v-if="!isLogin" class="tag" style="float: right;" @click="isShow.registerDialog=true">{{DEFAULT_WORD.login}}</div>
    <div v-else class="tag" style="float: right;" @click="isShow.personalDialog=true">
      <el-avatar :size="40" :src="myUser.avatarUrl" style="margin-top: 5px; margin-right: 5px; float: left"></el-avatar>
      <div style="float: left">{{myUser.username}}</div>
    </div>
<!--    <div v-if="isLogin" class="tag" style="float: right;" @click="href('/dynamic/index.html')">&ensp;{{DEFAULT_WORD.dynamic}}&ensp;</div>-->
    <div v-if="isLogin" class="tag" style="float: right;" @click="isShow.messageDrawer=true">&ensp;{{DEFAULT_WORD.message}}&ensp;</div>
<!--    <div v-if="isLogin" class="tag" style="float: right">-->
<!--      <el-dropdown style="height: 50px; line-height: 50px; color: black; font-size: 16px">-->
<!--        <span class="el-dropdown-link" style="min-width: 60px; outline: none; color: #606266;">&ensp;{{DEFAULT_WORD.publish}}&ensp;</span>-->
<!--        <template #dropdown>-->
<!--          <el-dropdown-menu>-->
<!--            <el-dropdown-item @click="open('/publish_video/index.html')">&emsp;{{DEFAULT_WORD.video}}&emsp;</el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
<!--          <el-dropdown-menu>-->
<!--            <el-dropdown-item @click="open('/publish_article/index.html')">&emsp;{{DEFAULT_WORD.article}}&emsp;</el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
<!--        </template>-->
<!--      </el-dropdown>-->
<!--    </div>-->
  </div>

  <!-- 登录注册框 -->
  <RegisterDialog :isShow="isShow"></RegisterDialog>
  <!-- 个人功能栏 -->
  <PersonalDialog :isShow="isShow"></PersonalDialog>

  <!-- 上传头像 -->
  <el-dialog title="上传头像" v-model="isShow.uploadAvatarDialog" align-center>
    <!-- <el-upload
            class="avatar-uploader"
            action="http://localhost:10010/user/uploadAvatar"
            :headers="headerObj"
            :show-file-list="true"
            :on-success="handleAvatarSuccess"
            :on-error="handleAvatarError"
            :before-upload="beforeAvatarUpload"
            :drag="true" :list-type="picture">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload> -->
    <!-- <el-upload
            class="avatar-uploader"
            action="http://localhost/api/media/upload/avatarfile"
            :headers="headerObj"
            :show-file-list="true"
            :on-success="handleAvatarSuccess"
            :on-error="handleAvatarError"
            :before-upload="beforeAvatarUpload"
            :drag="true" :list-type="picture" data="'{userId='+myUser.account+'}'">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload> -->
    <input type="file" @change="uploadAvatar($event)" accept="image/*">
    <el-button type="primary" @click="updateAvatar" round>保存头像</el-button>
  </el-dialog>

  <!--钻石兑换金币-->
  <el-dialog class="registerDialog" title="兑换" v-model="isShow.goldExchangeDialog" align-center>
    <div style="width: 200px; margin: 20px auto;">
      钻石：<el-input-number v-model="exchange.num" min="1" :max="myWallet.diamond" @change="handleChange"></el-input-number>
      <div style="margin: 10px 0;">
        <span>可获得金币：{{exchange.num*10}}</span>
        <el-button @click="goldExchange(exchange.num)" style="float: right;" round>兑换</el-button>
      </div>
    </div>
  </el-dialog>

  <!--购买或续期会员-->
  <el-dialog class="registerDialog" title="购买或续期：" v-model="isShow.buyMemberDialog" align-center>
    <div style="width: 250px; margin: 20px auto;">
      月数：<el-input-number v-model="buyMemberForm.buyMemberMonths" min="1" max="12" @change="handleChange"></el-input-number>
      <div style="margin: 20px 0; height: 30px;">
        <span style="line-height: 30px;">需要花费钻石：{{buyMemberForm.buyMemberMonths*buyMemberForm.buyMemberNeedMoney}}</span>
        <el-button @click="buyMember" style="float: right;" round>购买</el-button>
      </div>
    </div>
  </el-dialog>
  <!-- 创建群聊 -->
  <el-dialog class="registerDialog" title="创建群聊"
             v-model="isShow.messageCreateGroupDialog" :draggable="true" :modal="false"
             align-center>
    <el-button @click="createGroup">创建</el-button>
  </el-dialog>
  <!-- 消息对话框 -->
  <MessageDialog :isShow="isShow"></MessageDialog>
</template>
<style scoped>
/*
-webkit-background-clip: text;将设置的背景颜色限制在文字中
-webkit-text-fill-color: transparent;给文字设置成透明
*/
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  /* overflow-y: hidden; */
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.el-drawer__body {
  padding: 0 !important;
}

.title-back {
  background-color: aliceblue;
  width: 100%;
  height: 50px;
}

.title {
  z-index: 3;
  background-color: rgba(253, 254, 255, 0.8);
  backdrop-filter: blur(20px);
  width: 100%;
  height: 50px;
  /* border-bottom: 1px dashed; */
  border-color: darkgrey;
  position: fixed;
  top: 0;
  border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
  transition: 0.4s ease-out;
}
.title:hover {
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.3);
}

.title > .tag-h {
  z-index: 3;
  float: left;
  min-width: 60px;
  height: 100%;
  line-height: 50px;
  text-align: center;
  padding: 0 16px;
  user-select: none;
  font-weight: 500;
  color: #333;
}

.title > .tag {
  z-index: 3;
  float: left;
  min-width: 60px;
  height: 100%;
  line-height: 50px;
  text-align: center;
  padding: 0 16px;
  transition: all 0.3s ease;
  overflow: visible;
  user-select: none;
  position: relative;
  color: #606266;
  cursor: pointer;
}

.title > .tag::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--el-color-primary);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.title > .tag:hover {
  color: var(--el-color-primary);
  background: rgba(64, 158, 255, 0.1);
}

.title > .tag:hover::after {
  width: 70%;
}

.title > .tag:active {
  transform: scale(0.95);
  background: rgba(64, 158, 255, 0.2);
}

/* 搜索框样式优化 */
.searchBox {
  background-color: #f5f7fa;
  padding: 0 16px;
  border: 1px solid #dcdfe6;
  border-radius: 20px;
  height: 32px;
  width: 180px;
  outline: none;
  transition: all 0.3s ease;
  color: #606266;
}

.searchBox:hover {
  border-color: #c0c4cc;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.searchBox:focus {
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  background-color: #fff;
  width: 220px;
}

/* 下拉按钮与下拉菜单的过度 */
.tag > .drop-down-menu-white {
  position: absolute;
  display: none;
  top: 50px;
  height: 15px;
  min-width: 60px;
}
.tag:hover > .drop-down-menu-white {
  display: block;
}
/* 下拉菜单 */
.tag > .drop-down-menu {
  position: absolute;
  display: none;
  min-width: 60px;
  min-height: 40px;
  background-color: rgba(255, 255, 255, 0);
  top: 65px;
  margin-left: -20px;
  overflow: visible;
  transition: 1s ease-out;
  border-radius: 10px;
  box-shadow: 0 0 1px gray;
}
.tag:hover > .drop-down-menu {
  background-color: rgba(255, 255, 255, 1);
  display: block;
  box-shadow: 0 0 5px gray;
}

/* 下拉菜单按钮 */
.drop-down-menu > button {
  width: 100px;
  height: 50px;
  border: 0 solid;
  border-radius: 10px;
  margin: 0;
  padding: 0;
}
.drop-down-menu > button:hover {
  background-color: aqua;
}

/* 登录注册框 */
.registerDialog {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  width: 500px;
  min-height: 400px;
  border-radius: 20px;
}

.logInDialog, .signInDialog, .forgotPassDialog {
  position: fixed;
  left: 50px;
  width: 400px;
  margin: 0 auto;
}

.el-form-item .input {
  float: right !important;
  width: 320px !important;
}

.myCenterBtn {
  user-select: none;
  width: 100px;
  height: 40px;
  margin: 0;
}

.myCenterBtn:hover {
  color: var(--subject-color);
}


.topUpOptions {
  background-color: white;
  width: 100px;
  height: 60px;
  border: 1px #C6E2FF solid;
  border-radius: 10px;
  margin: 7px;
  float: left;
  text-align: center;
  line-height: 30px;
}
.topUpOptions:hover {
  background-color: #ECF5FF;
}
.topUpOptions:active {
  border: 1px #409EFF solid;
}


/* 动画代码 */
@keyframes vcIconAnimation {
  /* 初始css */
  0% {
    left: 0;
    background-color: red;
    color: white;
  }
  /* 初始停顿 */
  50% {
    left: 0;
    background-color: red;
    color: white;
  }
  /* 移动 */
  100% {
    left: -100px;
    background-color: rgba(0,0,0,0);
    color: red;
  }
}

.vcIcon {
  width: 220px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 6px;
  text-align: left;
  /* -webkit-text-fill-color: transparent; */
  /* background: linear-gradient(to bottom right, rgba(150, 0, 0, 1), rgba(255, 0, 0, 1)); */
  animation-name: vcIconAnimation;
  animation-duration: 6s;
  position: relative;
  animation-fill-mode: both;
}



/*
消息页面
*/



.messageBox {
  min-width: 0;
  max-width: 80%;
  background-color: white;
  float: left;
  font-size: 16px;
  line-height: 23px;
  border: 1px rgba(230, 230, 230, 1) solid;
  border-radius: 5px;
  padding: 4px 10px;
  word-wrap:break-word;
  word-break:normal;
}

.chatBtn {
  border-radius: 15px;
  border: 1px rgba(200, 200, 200, 1) solid;
  height: 25px;
  width: 65px;
  margin: 0 15px;
}
.chatBtn:hover {
  background-color: rgba(220, 220, 220, 1);
}
.chatBtn:active {
  border-radius: 15px;
  border: 0;
  background-color: rgba(200, 200, 200, 1);
  border: 1px rgba(200, 200, 200, 1) solid;
}

/* 消息左边按钮 */
.message_left_btn {
  background-color: white;
  text-align: center;
  width: 80px;
  height: 50px;
  margin-right: 15px;
  margin-bottom: 15px;
  line-height: 50px;
  border-radius: 10px;
  transition: 0.4s ease-out;
  box-shadow: 0 0 0px 1px rgba(220,220,220,0.8);
  user-select: none;
  float: left;
}
.message_left_btn:hover {
  box-shadow: 0 0 20px 1px rgba(220,220,220,1);
}

</style>
